<template>
  <view class="wh_750 flex flex-column align-center bg_F5F5F5 pageHeight">
    <s-header-title ref="headerTitle" :isShowHome="page.options.is_share == 1 && page.options.is_show != 1"
                    :isDisplayBack="page.options.is_share != 1 || page.options.is_show == 1"
                    :title="page.options.is_flag != 1 ?'家庭圈': '家庭圈'" is-fixed
                    background="#f5f5f5"
                    @getPageHeight="getPageHeight">
      <template>
        <view class="uploadPhoto_headerTitle">
          <text v-if="page.options.is_share != 1" class="uploadPhoto_headerTitle_text">
            {{
              page.options.is_flag != 1 ? page.options.name : family.details.name ? family.details.name : '暂无家庭名称'
            }}
          </text>
          <text v-else class="uploadPhoto_headerTitle_text">
            {{
              page.options.is_flag != 1 ? page.options.name : page.options.shareName
            }}
          </text>
        </view>
      </template>
    </s-header-title>
    <view :style="{height:page.headerHeight + 'px'}"></view>
    <scroll-view class="wh_750"
                 scroll-y
                 :style="{
                   height: `calc(100vh - ${page.headerHeight}px)`
                 }"
                 :lower-threshold="400"
                 @scrolltolower="scrolltolower"
    >
      <view class="wh_750 flex flex-column align-center">
        <family-circle v-for="(item,index) in family.family_circle" :key="index" :info="item" :background="'#FFFFFF'"
                       :detailFlag="true" :show-margin="index != 0"
                       :index="index" class="z-1" :is-show-reply="false" :isShowDel="false"
                       :border="family.family_circle.length - 1 != index" :options="page.options"
                       @likeInterface="familyCircleLike" @openCreateUser="openCreateUser"
                       @openLogin="openLogin" @shareAppMessage="shareAppMessage"></family-circle>
        <view class="family_publish z_1 flex align-center justify-center mt_23" @click.stop="familyCircleBublish">
          <text class="family_publish_text">发布家庭圈</text>
        </view>
        <view class="hW_50"></view>
      </view>

    </scroll-view>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/family/components/headerTitle.vue';
  import { computed, onMounted, reactive } from 'vue';
  import { onLoad, onShareAppMessage, onUnload } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import FamilyCircle from '@/pages/family/components/familyCircle.vue';
  import { showAuthModal } from '@/sheep/hooks/useModal';

  const page = reactive({
    options: {},
    headerHeight: 0,
  });
  const family = reactive({
    details: {},
    family_circle: [],
  });
  // 获取家庭圈参数
  const familyCircleOption = reactive({
    page: 1,
    pagesize: 10,
    total: 0,
  });
  const is_login = computed(() => sheep.$store('user').isLogin);

  onLoad((options) => {
    page.options = options;
    uni.$on('friendsCircleLike', (info) => {
      family.family_circle.forEach((item, index) => {
        if (item.circle_id == info.id) {
          family.family_circle[index].circle.like_count++;
        }
      });
    });
    uni.$on('delectClecir', () => {
      family.family_circle = [];
      // 获取家庭详情
      getFamilyDetail();
      // 获取家庭圈
      getFamilyCircle();
    });
  });

  onMounted(() => {
    // 获取家庭详情
    getFamilyDetail();
    // 获取家庭圈
    getFamilyCircle();
  });

  onUnload(() => {
    uni.$off('friendsCircleLike');
    uni.$off('delectClecir');
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  // 获取家庭详情
  async function getFamilyDetail() {
    const { data } = await sheep.$api.family.getFamilyCulture({
      family_id: page.options.family_id,
    });
    family.details = data;
  }

  // 获取家庭圈
  async function getFamilyCircle() {
    if (!page.options.member_id) {
      const { data } = await sheep.$api.family.getFamilyCircle({
        family_id: page.options.family_id,
        page: familyCircleOption.page,
        pagesize: familyCircleOption.pagesize,
      });
      familyCircleOption.total = data.count;
      family.family_circle = [...family.family_circle, ...data.list];
    } else {
      const { data } = await sheep.$api.family.getMemberCircle({
        family_id: page.options.family_id,
        member_id: page.options.member_id,
        page: familyCircleOption.page,
        pagesize: familyCircleOption.pagesize,
      });
      familyCircleOption.total = data.count;
      family.family_circle = [...family.family_circle, ...data.list];
    }
  }

  function scrolltolower() {
    if (familyCircleOption.page * familyCircleOption.pagesize < familyCircleOption.total) {
      familyCircleOption.page += 1;
      getFamilyCircle();
    }
  }

  function familyCircleLike(index) {
    family.family_circle[index].circle.like_count++;
  }

  async function familyCircleBublish() {
    if (!is_login.value) {
      showAuthModal();
      return;
    }
    const { code, msg } = await sheep.$api.family.checkAuth({
      family_id: page.options.family_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    sheep.$router.go('/pages/family/familyCircleRelease', {
      family_id: page.options.family_id,
    });
  }

  // #ifdef MP-WEIXIN
  onShareAppMessage((res) => {
    // 家庭圈分享
    if (res.from == 'button') {
      return {
        title: res.target.dataset.info.circle.content.replace(/<[^>]*>/g, ''),
        path: res.target.dataset.path,
        imageUrl: !!res.target.dataset.info.circle.images && res.target.dataset.info.circle.images.length > 0 ? res.target.dataset.info.circle.images[0].image : `${IMG_URL.value}/index/share_background_defult.png`,
      };
    }
  });
  // #endif
</script>


<style scoped lang="scss">

  .uploadPhoto_headerTitle {
    position: absolute;
    bottom: -26rpx;
    left: 50%;
    transform: translateX(-50%);

    .uploadPhoto_headerTitle_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #A0A0A0;
    }
  }

  .family_publish {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 41rpx 41rpx 41rpx 41rpx;

    .family_publish_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
</style>
